<template>
  <div class="global-btns">
    <template v-for="(item, index) in value">
      <div v-if="!item.noshow" :key="index" :class="{'btns-item': !item.isclass}">
        <el-dropdown v-if="item.btnList" trigger="click">
          <span class="el-dropdown-link el-button--text">
            <i :class="[item.icon, 'btns-icon']" />{{ item.label }}
          </span>
          <el-dropdown-menu slot="dropdown" split-button="true">
            <el-dropdown-item v-for="(btn, i) in item.btnList" :key="i" :icon="btn.icon" @click.native="btn.click(btn, i)">{{ btn.label }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button v-else size="medium" type="text" :disabled="item.disabled" @click="item.click(item, index)">
          <i :class="[item.icon, 'btns-icon']" />
          {{ item.label }}
        </el-button>
      </div>
    </template>
    <slot />
  </div>
</template>
<script>
  /**
   * 按钮操作区
   * @param {Array} list
   * label 按钮名称
   * icon 按钮icon
   * click 按钮事件
   * noshow 是否不展示
   * disabled 是否禁用
   */
  export default {
    props: {
      list: {
        type: Array,
        default: () => {
          return []
        }
      },
      loading: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        value: []
      }
    },
    watch: {
      list: {
        handler(v) {
          this.value = v
        },
        immediate: true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .global-btns {
    width: 100%;
    .btns-item {
      display: inline-block;
      margin-right: 24px;
      .btns-icon {
        font-size: 14px;
      }
      .el-button--text {
        color: #999;
        &:hover {
          color: #248AFF;
        }
      }
    }
    .el-dropdown-link:hover{
      cursor: pointer;
    }
  }
</style>
